import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Spin,
  Tooltip,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Tag,
} from 'antd';
import moment from 'moment';
import router from 'umi/router';
import XLSX from '../../../assets/xlsx.min';
// import * as XLSX from 'xlsx-style';

import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './Test.less';

const listernerable = false;
const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');
const statusMap = ['default', 'processing', 'success', 'error'];

/* eslint react/no-multi-comp:0 */
@connect(({ aiwatch, loading }) => ({
  aiwatch,
  loading: loading.models.modelAIwatch,
}))
@Form.create()
class TwoFundPosition extends PureComponent {
  state = {
    filterData: [],
    expandForm: false, // 查询菜单栏 是否显示
    listLoading: false,
    formValues: {
      method: 'GetList',
      page: 1,
      pagesize: 200,
      type: 3,
      name: '',
    }, // 查询菜单栏   查询参数
    modalVisible: false,
    updateModalVisible: false,
    selectedRows: [],
    stepFormValues: {},
    putcallinfoVisible: false,
    putcallinfo: {
      callCount: 0,
      putCount: 0,
      dateCall: '-',
      datePut: '-',
    },
  };

  columns = [
    {
      title: 'BID做多',
      dataIndex: 'bidcall',
      render: text => <span>{text}</span>,
    },
    {
      title: 'BID做空',
      dataIndex: 'bidput',
      render: text => <span>{text}</span>,
    },
    {
      title: 'ETF做多',
      dataIndex: 'etfcall',
      render: text => <span>{text}</span>,
    },
    {
      title: 'ETF做空',
      dataIndex: 'etfput',
      render: text => <span>{text}</span>,
    },
    {
      title: 'TOP20',
      dataIndex: 'high20',
      render: text => <span>{text}</span>,
    },
  ];

  // 默认加载数据-起始方法
  render() {
    function formatdata(res) {
      if (res.code == 1 && typeof res.data !== 'number') {
        res.data.bidcall = res.data.bidcall ? res.data.bidcall : [];
        res.data.bidput = res.data.bidput ? res.data.bidput : [];
        res.data.etfcall = res.data.etfcall ? res.data.etfcall : [];
        res.data.etfput = res.data.etfput ? res.data.etfput : [];
        res.data.high20 = res.data.high20 ? res.data.high20 : [];

        const maxl = Math.max.apply(null, [
          res.data.bidcall.length,
          res.data.bidput.length,
          res.data.etfcall.length,
          res.data.etfput.length,
          res.data.high20.length,
        ]);
        const tabdata = [];
        for (let i = 0; i < maxl; i++) {
          tabdata.push({
            bidcall: res.data.bidcall[i],
            bidput: res.data.bidput[i],
            etfcall: res.data.etfcall[i],
            etfput: res.data.etfput[i],
            high20: res.data.high20[i],
          });
        }
        return tabdata;
      }
    }
    const {
      aiwatch: { data },
      loading,
      total,
    } = this.props;

    const {
      selectedRows,
      modalVisible,
      updateModalVisible,
      stepFormValues,
      listLoading,
    } = this.state;

    const newdata = {
      list: formatdata(data),
      pagination: {
        current: this.state.formValues.page,
        pageSize: this.state.formValues.pagesize,
        total: parseInt(data.total),
      },
    };

    return (
      <PageHeaderWrapper title="个股期权成交监控列表">
        <Card bordered={false}>
          <Tag
            color="#108ee9"
            style={{
              marginBottom: '10px',
              display: this.state.putcallinfoVisible ? 'inline-block' : 'none',
            }}
          >
            <div>股票多空信号数统计：</div>
            <div>{`${this.state.putcallinfo.dateCall} 做多 ${this.state.putcallinfo.callCount}`}</div>
            <div>{`${this.state.putcallinfo.datePut} 做空 ${this.state.putcallinfo.putCount}`}</div>
          </Tag>

          <div className={styles.tableList}>
            {/*      <div className={styles.tableListForm}>{this.renderForm()}</div> */}
            <StandardTable
              selectedRows={selectedRows}
              loading={listLoading}
              data={newdata}
              columns={this.columns}
              onChange={this.handleStandardTableChange}
              rowKey="id"
              pagination={false}
              hideOnSinglePage
            />
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const that = this;
    // this.refs.IDinput.state.value = localStorage.getItem('userToken') || '';
    const { dispatch } = this.props;
    const { formValues } = this.state;
    dispatch({
      type: 'aiwatch/CountTopBottom',
      payload: {
        mark: 1,
      },
      callback: res => {
        if (res.code == 1) {
          if (!res.data.dateCall || typeof res.data.dateCall !== 'string') {
            return;
          }
          that.setState({
            putcallinfoVisible: true,
            putcallinfo: {
              callCount: res.data.callCount,
              putCount: res.data.putCount,
              dateCall: res.data.dateCall.substring(0, 10),
              datePut: res.data.datePut.substring(0, 10),
            },
          });
        }
      },
    });
  }
  // 菜单栏- 点击展开显示 事件
  // renderAdvancedForm() {
  //   const {
  //     form: { getFieldDecorator },
  //   } = this.props;
  //   return (
  //     <Form onSubmit={this.handleSearch} layout="inline">
  //       <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
  //         <Col md={8} sm={24}>
  //           <FormItem label="最大财报日">
  //             {getFieldDecorator('maxEarningsDate ')(
  //               <DatePicker style={{ width: '100%' }} placeholder="请输入最大财报日" />
  //             )}
  //           </FormItem>
  //         </Col>
  //         <Col md={8} sm={24}>
  //           <FormItem label="最小财报日">
  //             {getFieldDecorator('minEarningsDate')(
  //               <DatePicker style={{ width: '100%' }} placeholder="请输入最小财报日" />
  //             )}
  //           </FormItem>
  //         </Col>
  //         <Col md={8} sm={24}>
  //           <FormItem label="最小保本幅度">
  //             {getFieldDecorator('minBreakEvenMargin')(<Input placeholder="请输入" />)}
  //           </FormItem>
  //         </Col>
  //       </Row>
  //       <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
  //         <Col md={8} sm={24}>
  //           <FormItem label="最小权利金">
  //             {getFieldDecorator('minRoyalty')(<Input placeholder="请输入" />)}
  //           </FormItem>
  //         </Col>
  //         <Col md={8} sm={24}>
  //           <FormItem label="最小收益率">
  //             {getFieldDecorator('minYieldRate')(<Input placeholder="请输入" />)}
  //           </FormItem>
  //         </Col>
  //       </Row>
  //       <div style={{ overflow: 'hidden' }}>
  //         <div style={{ marginBottom: 24 }}>
  //           <Button type="primary" htmlType="submit">
  //             查询
  //           </Button>
  //           <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
  //             重置
  //           </Button>
  //           <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
  //             收起 <Icon type="up" />
  //           </a>
  //         </div>
  //       </div>
  //     </Form>
  //   );
  // }

  // 菜单栏 默认收缩显示 事件
  // renderSimpleForm() {
  //   const {
  //     form: { getFieldDecorator },
  //   } = this.props;
  //   return (
  //     <Form onSubmit={this.handleSearch} layout="inline">
  //       <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
  //         <Col md={8} sm={24}>
  //           <FormItem label="最小权利金">
  //             {getFieldDecorator('minRoyalty')(<Input placeholder="请输入" />)}
  //           </FormItem>
  //         </Col>
  //         <Col md={8} sm={24}>
  //           <FormItem label="最小收益率">
  //             {getFieldDecorator('minYieldRate')(<Input placeholder="请输入" />)}
  //           </FormItem>
  //         </Col>
  //         <Col md={8} sm={24}>
  //           <span className={styles.submitButtons}>
  //             <Button type="primary" htmlType="submit">
  //               查询
  //             </Button>
  //             <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
  //               重置
  //             </Button>
  //             <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
  //               展开 <Icon type="down" />
  //             </a>
  //           </span>
  //         </Col>
  //       </Row>
  //     </Form>
  //   );
  // }

  // 菜单栏-查询按钮 事件
  // handleSearch = e => {
  //   e.preventDefault();
  //   const { dispatch, form } = this.props;
  //   const { formValues } = this.state;

  //   form.validateFields((err, fieldsValue) => {
  //     if (err) return;

  //     const values = {
  //       ...fieldsValue,
  //       updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
  //     };
  //     if (values.maxEarningsDate != undefined) {
  //       formValues.maxEarningsDate = values.maxEarningsDate;
  //     }
  //     if (values.minBreakEvenMargin != undefined) {
  //       formValues.minBreakEvenMargin = parseFloat(values.minBreakEvenMargin);
  //     }
  //     if (values.minEarningsDate != undefined) {
  //       formValues.minEarningsDate = values.minEarningsDate;
  //     }
  //     if (values.minRoyalty != undefined) {
  //       formValues.minRoyalty = parseFloat(values.minRoyalty);
  //     }
  //     if (values.minYieldRate != undefined) {
  //       formValues.minYieldRate = parseFloat(values.minYieldRate);
  //     }
  //   });

  //   dispatch({
  //     type: 'monitor/GetRoyaltiesList',
  //     payload: formValues,
  //   });
  // };

  // //菜单栏- 重置按钮 事件
  // handleFormReset = () => {
  //   const { form, dispatch } = this.props;
  //   const { formValues } = this.state;
  //   form.resetFields();
  //   formValues.maxEarningsDate = '';
  //   formValues.minBreakEvenMargin = 0;
  //   formValues.minEarningsDate = '';
  //   formValues.minRoyalty = 0;
  //   formValues.minYieldRate = 0;

  //   dispatch({
  //     type: 'monitor/GetRoyaltiesList',
  //     payload: formValues,
  //   });
  // };

  // //菜单栏- 展开 关闭 事件
  // toggleForm = () => {
  //   const { expandForm } = this.state;
  //   this.setState({
  //     expandForm: !expandForm,
  //   });
  // };
}
function mul(arg1, arg2) {
  let m = 0;
  const s1 = arg1.toString();
  const s2 = arg2.toString();
  try {
    m += s1.split('.')[1].length;
  } catch (e) {}
  try {
    m += s2.split('.')[1].length;
  } catch (e) {}
  return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m);
}
export default TwoFundPosition;
